@import '@wordpress/base-styles/mixins';
@import '@wordpress/base-styles/breakpoints';
// Reader-specific tweaks to components

// Overrides default 720px width
.is-reader-page .following.main,
.is-reader-page .tag-stream__main.main {
	max-width: 768px;

	&.reader-two-column {
		max-width: 968px;

		.reader__content,
		.tag-stream__header {
			max-width: 600px;
		}

		&.is-discover-stream {
			.reader-tag-sidebar-recommended-sites {
				.reader-subscription-list-item .follow-button__label,
				.reader-subscription-list-item__settings-label {
					display: none;
				}

				.reader-site-notification-settings__button-label {
					display: none;
				}
			}
		}
	}
}

.is-reader-page .reader__card.card.is-placeholder {
	border-bottom: 1px solid #e9e9ea;
	box-shadow: none;
	border-radius: 6px; /* stylelint-disable-line scales/radii */
	margin-bottom: 16px;
	padding: 6px 16px 30px;

	@include breakpoint-deprecated( '<660px' ) {
		margin: 0 15px 16px;
	}

	.reader__post-footer {
		margin-left: 0;
	}
}

.following {

	@include breakpoint-deprecated( '<660px' ) {
		-webkit-perspective: none;
		perspective: none;
	}
}

.stream__container {
	display: flex;
	flex-direction: column;
	gap: 24px;
}
.reader__content .reader-excerpt,
.reader__content .reader-post-card__title {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.reader__card.card {
	padding: 16px;
	transition: all 0.1s ease-in-out;
	margin-bottom: 15px;

	&.is-seen {
		opacity: 0.5;
	}

	&.is-selected,
	&.is-x-post.is-selected,
	&.tag-afk.is-selected {
		&::before {
			background: var( --color-primary );
			content: '';
			position: absolute;
			bottom: 0;
			left: -8px;
			top: 0;
			width: 2px;
		}
	}

	@include breakpoint-deprecated( '>480px' ) {
		padding: 16px 24px 24px;
		margin-bottom: 24px;
	}

	.site {
		margin-right: 96px;
	}

	.site__content {
		padding: 0;
	}

	.follow-button {
		position: absolute;
		top: -3px;
		right: 0;

		@include breakpoint-deprecated( '>660px' ) {
			z-index: z-index( 'reader-card-follow-button-parent', '.reader__card.card .follow-button' );
		}
	}

	.reader-post-byline {
		margin: 8px 0;
		padding: 0;
		font-size: $font-body-small;
		color: var( --color-neutral-20 );

		.gravatar {
			height: 16px;
			width: 16px;
			top: 4px;
		}
	}

	// Loading Placeholders
	&.is-placeholder {
		pointer-events: none;
		user-select: none;

		.reader__placeholder-text,
		.site-icon {
			color: transparent;
			background-color: var( --color-neutral-0 );
			animation: loading-fade 1.6s ease-in-out infinite;
		}

		.site-icon {
			display: inline-block;
			margin-right: 6px;
			height: 16px;
			width: 16px;
		}

		.reader__post-time-placeholder {
			position: relative;
			font-size: $font-body-small;

			@include breakpoint-deprecated( '<480px' ) {
				font-size: $font-body-small;
			}
		}
	}

	&.is-headerless {
		@include breakpoint-deprecated( '>480px' ) {
			padding-top: 25px;
		}

		.reader__post-title {
			margin-top: 0;
		}

		&.has-featured-image {
			padding-top: 0;
		}
	}

	.post-excerpt-only {
		p {
			margin-bottom: 1em;
		}
	}

	&.hide-xpost .po-xpost {
		display: none;
	}

	&.is-x-post {
		background: transparent;
		box-shadow: none;
		padding: 16px 24px;
		display: flex;

		.reader__post-title {
			font-size: $font-body;
			line-height: normal;
			margin: 0;
			cursor: pointer;
		}
	}

	&.tag-afk {
		background: transparent;
		box-shadow: none;
		padding: 16px 24px;

		&:hover {
			cursor: pointer;
		}

		.reader-full-post__story-content,
		.reader-post-byline__tag,
		.reader-post-byline__date,
		.reader__post-featured-image,
		.reader__post-footer,
		.post-excerpt,
		.site__info {
			display: none;
		}

		.site {
			pointer-events: none;
		}

		.reader__post-header {
			margin-bottom: 0;
		}

		.reader__post-title {
			display: block;
			font-size: $font-body;
			margin: 0;
			position: absolute;
			top: 14px;
			left: 66px;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			max-width: calc( 100% - 90px );
		}

		.reader-post-byline {
			margin: 0;
			font-size: $font-body-small;
			position: absolute;
			top: 34px;
			left: 44px;
		}

		.follow-button {
			display: none;
		}

		&.is-headerless {
			padding: 16px 24px 54px;

			.reader__post-title,
			.reader-post-byline {
				position: absolute;
				left: 25px;
			}
		}
	}
}

.is-section-reader {
	// X-Posts
	.reader__card.card.is-x-post {
		margin: 0;
		padding: 16px 0 32px;
		border-bottom: 1px solid #e9e9ea;

		@include breakpoint-deprecated( '<660px' ) {
			padding: 16px 16px 32px;
		}

		+ .reader-post-card {
			margin-top: 16px;
		}

		.reader__post-title-link,
		.reader__post-title-link:visited {
			color: var( --color-neutral-50 );
		}

		.reader__post-title-link:hover {
			color: var( --color-neutral-70 );
		}

		.reader-avatar {
			margin: 0 12px 0 0;
			width: auto;

			&:hover {
				cursor: pointer;
			}
		}

		.site-icon {
			margin: 1px;
		}

		.gravatar {
			border: 1px solid var( --color-border-inverted );
		}
	}

	.reader__card.card.is-x-post + .reader__card.card.is-x-post {
		padding-top: 32px;
	}

	// Back Button
	.back-button {
		border: none;
		position: fixed;
		top: calc(var(--masterbar-height) + 29px);
		left: var(--sidebar-width-max);
		background-color: transparent;
		z-index: z-index(".masterbar", ".reader-back");

		button.is-compact.is-borderless {
			@media ( max-width: 1180px ) {
				margin: -5px 0 7px 0;
				padding: 0;
			}

			@media ( max-width: 600px ) {
				margin: 0 0 14px 14px;
			}
		}

		@media ( max-width: 1180px ) {
			position: unset;
			display: flex;
		}
	}

	// Styles to allow a temporary ovarlay positioned over
	// the stream feed while loading and initial scrolling.
	.main {
		position: relative;

		&.tag-stream__main {
			.back-button {
				button.is-compact.is-borderless {
					@media ( max-width: 660px ) {
						padding: 0 0 0 16px;
					}
					@media ( max-width: 600px ) {
						padding: 0 0 8px 0;
					}
				}
			}
		}

		&.reader-full-post {
			.back-button {
				button.is-compact.is-borderless {
					@media ( max-width: 1180px ) {
						margin: 7px 0 0 0;
						padding: 0 0 0 24px;
					}
				}
			}
		}

		&.search-stream {
			.following {
				.back-button {
					display: none;
				}
			}
		}

		.stream__init-overlay {
			display: none;

			&.stream__init-overlay-enabled {
				background: var( --studio-white );
				position: absolute;
				display: block;
				left: 0;
				right: 0;
				top: 0;
				bottom: 0;
				z-index: z-index( 'root', '.stream__init-overlay-enabled' );
			}
		}
	}
}

body.is-section-reader div.layout.is-global-sidebar-visible .is-site-stream .back-button button.is-compact.is-borderless {
	@media ( max-width: 1300px ) {
		margin-bottom: 24px;
	}
}

// Featured Image/Video
.reader__post-featured-image,
.reader__post-featured-video {
	cursor: pointer;
	overflow: hidden;
	width: calc( 100% + 32px );
	position: relative;
	top: 0;
	left: -16px;
	margin-bottom: 16px;
	border-bottom: 1px solid var( --color-neutral-10 );
	box-shadow: inset 0 0 2px 2px color-mix(in srgb, var(--color-neutral-20) 10%, transparent);
	background: color-mix(in srgb, var(--color-neutral-0) 30%, transparent);

	@include breakpoint-deprecated( '>480px' ) {
		left: -24px;
		width: calc( 100% + 48px );
		margin-bottom: 24px;
	}

	img {
		display: block;
		width: auto !important; // Dirrty, I know. But it overrides the inline styles applied to the image. -shaun
		margin: 0 auto;
		max-height: 70vh;
	}

	&.is-shorter-abtest {
		img {
			object-fit: cover;
			max-height: none;
		}
	}

	// This helps avoid some random whitespace below YourTube embeds.
	iframe {
		display: block;
	}
}

// Handling the different types of Reader cards
.reader__card {
	// Featured image/video should "bleed" to the edge of the card.
	&.has-featured-image {
		//padding-top: 0;
	}

	// Inline Post Content
	// Shorter posts display the full post content directly in the stream.
	.reader-full-post__story-content {
		@extend %content-font;
		margin: 0 -24px;
		padding: 0 24px;
		background: transparent;
		border: none;

		color: var( --color-neutral-60 );
		line-height: 1.8;
		overflow-wrap: break-word;
		word-wrap: break-word;

		blockquote {
			margin-left: 0;
			margin-right: 0;
			font-size: $font-body;
		}

		p {
			line-height: 1.8;
		}

		// Inline Reblog Tweaks
		p.reblog-from {
			@include breakpoint-deprecated( '>480px' ) {
				margin-left: -24px;
				margin-right: -24px;
				padding-left: 24px;
				padding-right: 24px;
			}
			@include breakpoint-deprecated( '<480px' ) {
				margin-left: -16px;
				margin-right: -16px;
				padding-left: 16px;
				padding-right: 16px;
			}
		}

		p.reblog-source {
			margin-bottom: 16px;
			padding-bottom: 8px;
			border-bottom: 1px solid var( --color-neutral-0 );
		}
	}
}

// P2 cross-posts (x-posts), which is Automattic-only.
.reader__x-post-author {
	font-weight: 600;
}

.reader__x-post,
.reader__x-post-to {
	font-size: $font-body-small;
	font-family: $sans;
	color: var( --color-text-subtle );
	position: relative;
}

.reader__x-post-to {
	margin-top: 16px;
	padding-left: 26px;

	.gridicon {
		height: 12px;
		width: 12px;
		display: inline-block;
		fill: var( --color-text-inverted );
		background: var( --color-neutral-light );
		padding: 4px;
		border-radius: 100%;
		position: absolute;
		top: 0;
		left: 0;
	}
}

.reader__post-header {
	margin: 0 0 16px;
	padding: 0;
	position: relative;
	line-height: 16px;
	@include clear-fix;
}

.reader__post-byline {
	display: flex;
	flex-flow: row nowrap;
	align-items: baseline;
	color: var( --color-neutral-20 );
	font-size: $font-body-extra-small;
	line-height: 1;
}

// In-stream Recommendations
.reader-stream__recommended-posts {
	padding-bottom: 12px;

	@include breakpoint-deprecated( '<660px' ) {
		margin: 0 15px;
	}
}

.reader-stream__recommended-posts-header {
	color: var( --color-neutral-20 );
	font-size: $font-body-small;
	font-weight: 600;
	margin: 13px 0 17px;
	position: relative;
	text-transform: uppercase;

	.gridicon {
		fill: var( --color-neutral-20 );
		margin-right: -2px;
		position: relative;
		left: -2px;
		top: 2px;
	}
}

.reader-stream__recommended-posts-list {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;

	@include break-small {
		flex-direction: row;
	}
}

.reader-stream__recommended-posts-list-item {
	display: flex;
	flex-direction: row;
	list-style-type: none;
	width: 100%;

	@include breakpoint-deprecated( '>960px' ) {
		flex-direction: column;
		width: 50%;
	}

	.reader-stream__recommended-post-dismiss {
		height: 30px;

		@include breakpoint-deprecated( '<960px' ) {
			margin-right: 15px;
		}

		.button {
			float: right;
		}

		.gridicon {
			fill: var( --color-neutral-20 );
			width: 14px;
			height: 14px;
			top: -3px;
		}
	}

	.card.reader-related-card {
		margin: 0;

		.reader-related-card__meta .gravatar {
			margin: 3px 8px 0 0;
		}

		&.has-thumbnail {
			.reader-related-card__meta {
				margin-bottom: 17px;
			}

			.reader-related-card__meta .follow-button {
				margin-top: -9px;
			}

			.reader-related-card__post {
				margin-top: 0;
				max-height: 108px;

				@include breakpoint-deprecated( '<480px' ) {
					max-height: 125px;
				}
			}
		}
	}

	&:first-child {
		margin-right: 10px;

		@include breakpoint-deprecated( '>660px' ) {
			margin-right: 15px;
		}
	}

	&:last-child {
		margin-left: 10px;

		@include breakpoint-deprecated( '>660px' ) {
			margin-left: 15px;
		}
	}

	&:first-child,
	&:last-child {
		@include breakpoint-deprecated( '<480px' ) {
			margin: 0 0 20px;
		}
	}

	&:only-child {
		margin: 0;
	}

	.reader-related-card__meta .follow-button {
		margin-top: -8px;
	}

	.reader-related-card__post {
		margin-top: -2px;
		max-height: 208px;

		@include breakpoint-deprecated( '<660px' ) {
			max-height: 207px;
		}
	}

	.reader-related-card__featured-image {
		border: 1px solid var( --color-neutral-0 );
		margin: 0 0 14px;
	}
}

.search-stream__results {
	.stream__right-column {
		.reader-sidebar-site_url {
			display: block;
		}
		.reader-sidebar-site_description {
			display: -webkit-box;
		}
	}
}

.stream__two-column {
	align-items: flex-start;
	display: flex;
	flex-wrap: nowrap;
	gap: 40px;
	justify-content: flex-start;
}

.reader__content {
	position: relative;
	width: 100%;

	.stream__list {
		width: 100%;

		.app-promo {
			border-radius: 6px; /* stylelint-disable-line scales/radii */
			background-color: transparent;
			margin-bottom: 24px;

			.app-promo__qr-code {
				margin: -10px 0 0;
				flex-direction: row-reverse;
			}

			.get-apps__card-text {
				padding: 0;
			}
			.app-promo__qr-code-canvas {
				margin-left: 16px;
			}

			.app-promo__title {
				font-family: Recoleta, 'Noto Serif', Georgia, 'Times New Roman', Times, serif;
			}

			@include breakpoint-deprecated( '<660px' ) {
				margin-inline: 17px 17px;
			}

			@include break-medium {
				.app-promo__qr-code {
					margin: -20px 0 0;
				}

				.app-promo__qr-code-canvas {
					margin-top: -10px;
				}

				.app-promo__title {
					margin-bottom: 0;
					margin-right: 110px;
				}
			}
		}
	}
}

.stream__right-column {
	margin: 16px 0 0;
	min-width: 270px;

	.reader-sidebar-site,
	.reader-sidebar-more {
		list-style: none;
	}

	.reader-sidebar-site_link {
		align-items: flex-start;
		display: flex;
		flex-wrap: nowrap;
		gap: 11px;
		justify-content: flex-start;
		margin-bottom: 24px;

		.count {
			position: relative;
			top: 2px;
		}

		img {
			border-radius: 100%;
		}
	}

	.reader-sidebar-site_siteicon {
		height: 32px;
		width: 32px;
		min-width: 32px;
	}

	.reader-sidebar-site_sitename {
		color: var( --color-neutral-100 );
		font-weight: 600;
		font-size: $font-body-small;

		&:hover {
			color: var( --color-text-subtle );
		}

		.reader-sidebar-site_nameurl,
		.reader-sidebar-site_updated {
			display: block;
			display: -webkit-box;
			overflow: hidden;
			-webkit-line-clamp: 1;
			-webkit-box-orient: vertical;
			white-space: nowrap;
			position: relative;

			.stream__two-column & {
				width: 225px;
			}
			.stream__two-column &::after {
				@include long-content-fade( $size: 5%, $color: var( --studio-white ) );
			}
		}
	}

	.reader-sidebar-site_updated {
		color: var( --color-neutral-50 );
		display: block;
		font-weight: 400;
		font-size: $font-body-extra-small;
		line-height: 18px;
	}

	h2 {
		align-items: flex-end;
		color: var( --color-neutral-100 );
		display: flex;
		font-weight: 600;
		font-size: $font-title-small;
		gap: 16px;
		line-height: 24px;
		margin-bottom: 32px;

		a {
			font-size: $font-body-small;
			font-weight: 400;
			line-height: 20px;
		}
	}

	.sidebar-streams__following-load-more {
		color: var( --color-neutral-100 );
		font-size: $font-body-small;
		font-weight: 500;
		padding: 0;
		text-align: left;
		width: unset;
		&:hover {
			color: var( --color-text-subtle );
		}
	}
	ul {
		margin-left: 0;
		width: 100%;
	}
	.reader-post-card__tag {
		background: var( --color-surface );
		border: 1px solid var( --color-neutral-5 );
		padding: 0 12px 3px;
	}
	.reader-tag-sidebar-related-tags,
	.reader-tag-sidebar-related-sites {
		margin-bottom: 32px;
		h2 {
			font-size: $font-body;
			margin-bottom: 14px;
		}
	}
	.reader-tag-sidebar-related-tags__follow-button {
		// compensate for line height so that visual margin is 36px;
		margin-bottom: 27px;
	}
	.reader-tag-sidebar-tags-page {
		display: block;
		font-size: $font-body-small;
		margin-bottom: 32px;
	}

	.reader-tag-sidebar__recent-prompts {
		h2 {
			font-size: $font-body;
			margin-bottom: 14px;
		}
		.reader-tag-sidebar__recent-prompt-link {
			display: block;
			font-size: $font-body-small;
			color: var( --color-link );
			margin-bottom: 12px;
		}
	}
	.reader-tag-sidebar-stats {
		display: flex;
		flex-direction: row;
		gap: 20px;
		// compensate for line height so that visual margin is 36px;
		margin-bottom: 29px;

		.reader-tag-sidebar-stats__item {
			display: flex;
			flex-direction: column;
		}

		.reader-tag-sidebar-stats__count {
			font-size: $font-title-small;
			font-weight: bold;
			width: 90px;
		}

		.reader-tag-sidebar-stats__title {
			font-size: $font-body-extra-small;
			color: var( --color-text-subtle );
		}
	}

	.reader-sidebar-site_url {
		display: none;
		color: var( --color-text-subtle );
		font-weight: 400;
		font-size: $font-body-extra-small;
		line-height: 18px;
	}

	.reader-sidebar-site_description {
		display: none;
		color: var( --color-neutral-70 );
		font-weight: 600;
		font-size: $font-body-extra-small;
		line-height: 18px;
		overflow: hidden;
		width: auto;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
	}

	.reader-post-card__tag-link {
		font-size: 13px;
		white-space: nowrap;
		cursor: pointer;
		&:hover {
			color: var( --color-text-subtle );
		}
		color: var( --color-neutral-100 );
		&:focus {
			outline: dotted 1px;
		}
	}

	.reader-tag-sidebar-related-tags {
		margin-bottom: 32px;
	}

	.reader-feed-header__seen-button {
		margin-bottom: 24px;
	}

	.reader-subscription-list-item .follow-button__label {
		display: none;
	}

	@include breakpoint-deprecated( '<660px' ) {
		margin: 24px 16px 0;

		h2 {
			margin: 16px 0;
		}
	}

	& .search-card.card {
		max-width: 270px;
		margin-left: 0;

		@include breakpoint-deprecated( '<660px' ) {
			max-width: unset;
		}
	}
}

// Posts and Sites tabbed headers
.stream__header .section-nav-tabs__dropdown,
.stream__header .section-nav__mobile-header {
	display: none;
}

.tag-stream__main .stream__header .section-nav {
	margin-top: 26px;
	@include break-medium {
		margin-top: 0;
	}
}

.stream__header .section-nav {
	background: inherit;
	border-bottom: 1px solid var( --color-neutral-10 );
	box-shadow: none;
	margin-bottom: 0;
	margin-top: 60px;
	padding-bottom: 0;

	@include breakpoint-deprecated( '<660px' ) {
		margin: 0 16px;
		width: calc( 100% - 32px );
	}

	@include breakpoint-deprecated( '>480px' ) {
		height: 58px;
	}

	// Add margin so that suggestions dont cover tabs on smaller devices.
	@include break-mobile {
		margin-top: 40px;
	}

	@include break-small {
		margin-top: 20px;
	}

	@include break-medium {
		margin-top: 0;
	}
}

// Stop the sidebar from expanding too wide when shown in a 2 column layout.
.stream__two-column .stream__right-column {
	max-width: 270px;
}

.stream__header .section-nav-group {
	display: flex;
	flex: 1 0 0%;
	margin-top: 5px;
	width: 0;
}

.stream__header .section-nav-tabs__list {
	display: flex;

	.section-nav-tab.is-selected {
		border-bottom: 2px solid var( --color-neutral-70 );
	}

	.is-selected .section-nav-tab__link {
		color: var( --color-neutral-70 );
	}

	.section-nav-tab__link {
		background-color: transparent;
		color: var( --color-primary );
		padding: 16px;

		&:hover {
			color: var( --color-primary );
		}
	}

	.section-nav-tab__text {
		color: var( --color-primary );
		font-weight: 600;
		font-size: $font-body-small;
		text-transform: uppercase;
		width: 100%;
	}
}

.reader-stream__blogging-prompt {
	clear: both;
	display: flex;
	flex-direction: column;
	margin: 6px 0 0 0;

	@include breakpoint-deprecated( '>960px' ) {
		margin: 0;
	}

	@include breakpoint-deprecated( '<660px' ) {
		margin: 0 16px;
	}

	.blogging-prompt__menu {
		display: none;
	}

	.blogging-prompt__card,
	.blogging-prompt__prompt-answers a {
		border-radius: 6px; /* stylelint-disable-line scales/radii */
	}
}

.is-site-stream .stream__two-column .stream__right-column {
	margin-top: 0;
}

.following-manage__search-followed {
	margin-left: 0;
}

.following-manage__search-followed-input {
	@include breakpoint-deprecated( '>960px' ) {
		min-width: 200px;
	}
}
